<template lang='pug'>
.ad_float
  a(href="javascript:;")
    img.float-img(:src="cdata[0].tag[0].picUrl | imgUrl", alt="")
</template>
<script>
import $ from 'webpack-zepto';
export default {
  props: ['cdata'],
  mounted() {
    this.$nextTick(() => {
      this.render()
    })
  },
  methods: {
    render() {
      var box = $('.ad_float');
      var now_position = box.offset();
      var now_top = now_position.top;
      var now_left = now_position.left;
      var cx;
      var cy;
      var pwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; //屏幕一半宽度
      var pheight = (window.innerHeight > 0) ? window.innerHeight : screen.height;
      var middleline = pwidth / 2 - (now_position.width / 2)
      var leftp = pwidth - now_position.width;
      let header = $('.header');
      var mintop = header.offset().height || 60;
      let tabbar =$('.weui-tabbar')
      var maxtop = pheight - tabbar.offset().height - now_position.height;
      var timenow = 0;
      var time;
      $('.ad_float').on('touchstart', function (e) {
        $(this).removeClass('add_animate');
        cx = e.touches[0].pageX - $(this).position().left;
        cy = e.touches[0].pageY - $(this).position().top;
        time = setInterval(function () {
          timenow += 1;
        }, 1)
      })
      $('.ad_float').on('touchmove', function (e) {
        e.preventDefault();
        var top = e.touches[0].clientY - cy;
        if (top < mintop) {
          top = mintop;
        }
        if (top > maxtop) {
          top = maxtop;
        }
        $('.ad_float').css({
          top: top,
          left: e.touches[0].clientX - cx
        })
      })
      $('.ad_float').on('touchend', function (e) {
        e.preventDefault();
        clearInterval(time);
        if (timenow <= 30) {
          // console.log(tag[0].linkUrl)
          if (tag[0].linkUrl) {
            indexWidget.checkClick(tag[0].linkUrl);
          }
        }
        timenow = 0;
        $(this).addClass('add_animate')
        if ($(this).offset().left > middleline) {
          $(this).css('left', leftp)
        } else {
          $(this).css('left', 0)
        }
      })
    }
  }

}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.ad_float {
  position: fixed;
  width: to_rem(80px);
  height: to_rem(80px);
  background-color: red;
  top: to_rem(800px);
  right: 0;
  z-index: 100;
  img {
    width: 100%;
    height: 100%;
  }
}
.add_animate {
    transition: left .3s ease-in;
}
</style>